<template>
  <div>
    <!-- ======= 搜索 Section ======= -->
    <div id="search">
      <vue-particles color="#dedede" clickMode="repulse"></vue-particles>
      <h2 class="section-title">我的作品集</h2>
      <h4 class="sub-title">这是我的个人作品，欢迎大家指导......</h4>
      <input v-model="keyword" class="search-input" placeholder="请输入关键词搜索" type="text" />
    </div>
    <!-- End 搜索 -->
    <div id="protfolio">
      <ul class="type-list">
        <li class="type">ALL</li>
        <li class="type">APP</li>
        <li class="type">CARD</li>
        <li class="type">WEB</li>
      </ul>
      <!-- ======= 作品集瀑布流 ======= -->
      <div class="waterfall-wrap flex justify-content-between">
        <!-- 思路一： 一个ul 通过定位来计算每一个li的位置 -->
        <!-- <ul class="flex flex-wrap justify-content-between">
          <li v-for="item in initData" :key="item.cover"><img :src="item.cover" alt=""></li>
        </ul> -->
        <!-- 思路二： 三个ul横过来 -->
        <ul v-for="(col,index) in portfolioData" :key="index">
          <li v-for="item in col.arr" :key="item.cover">
            <img :src="item.cover" alt="">
            <div class="mask">
              <div class="content">
                <h4 class="btn btn-orange">{{item.title}}</h4>
                <a class="link" :href="item.link"><i class="iconfont qm-link"></i></a>
              </div>
            </div>
          </li>
        </ul>
      </div><!-- End 作品集瀑布流 -->

    </div>
  </div>
</template>

<script>

// 粒子特效网址： https://vue-particles.netlify.app/
export default {
  name: "portfolio",
  data() {
    return {
      initData: [
        {
          cover: require('../assets/images/portfolios/1.png'),
          title: 'APP 1',
          link: 'https://baidu.com',
          height: 660
        }, {
          cover: require('../assets/images/portfolios/2.png'),
          title: 'CARD 1',
          link: 'https://baidu.com',
          height: 330
        },
        {
          cover: require('../assets/images/portfolios/3.png'),
          title: 'WEB 1',
          link: 'https://baidu.com',
          height: 745
        },
        {
          cover: require('../assets/images/portfolios/4.png'),
          title: 'CARD 2',
          link: 'https://baidu.com',
          height: 330
        },
        {
          cover: require('../assets/images/portfolios/5.png'),
          title: 'WEB 2',
          link: 'https://baidu.com',
          height: 745
        },
        {
          cover: require('../assets/images/portfolios/6.png'),
          title: 'CARD 3',
          link: 'https://baidu.com',
          height: 330
        },
        {
          cover: require('../assets/images/portfolios/9.png'),
          title: 'WEB 3',
          link: 'https://baidu.com',
          height: 745
        },
        {
          cover: require('../assets/images/portfolios/10.png'),
          title: 'WEB 4',
          link: 'https://baidu.com',
          height: 330
        },
        {
          cover: require('../assets/images/portfolios/7.png'),
          title: 'APP 2',
          link: 'https://baidu.com',
          height: 660
        },

        {
          cover: require('../assets/images/portfolios/8.png'),
          title: 'CARD 4',
          link: 'https://baidu.com',
          height: 330
        },
        {
          cover: require('../assets/images/portfolios/11.png'),
          title: 'CARD 5',
          link: 'https://baidu.com',
          height: 745
        },
        {
          cover: require('../assets/images/portfolios/12.png'),
          title: 'CARD 6',
          link: 'https://baidu.com',
          height: 330
        },
      ],
      keyword: ''
    }
  },
  computed: {
    portfolioData() {
      // 定义列的初始数据
      const cols = [{ arr: [], height: 0 }, { arr: [], height: 0 }, { arr: [], height: 0 }]
      // 定义获取最短列的方法
      const getMinCol = () => {
        let minCol = cols[0]
        for (let i = 1; i < cols.length; i++) {
          if (cols[i].height < minCol.height) {
            minCol = cols[i]
          }
        }
        return minCol
      }

      // 筛选数据
      const list = this.initData.filter(item => {
        const reg = new RegExp(this.keyword, 'i')
        if (item.title.search(reg) != -1) {
          return item
        }
      })


      list.forEach(item => {
        // 1、取出每次的item 
        // 2、判断当前最短的是哪一列
        const minCol = getMinCol()
        // 3、把当前的item塞到最短的那一列中
        minCol.arr.push(item)
        // 4、更新列的高度
        minCol.height += item.height + 43
      });
      return cols
    }
  }
};
</script>

<style lang="scss" scoped>
#search {
  height: 5.93rem;
  overflow: hidden;
  text-align: center;
  position: relative;

  .section-title {
    margin: {
      top: 1.48rem;
      bottom: 0.42rem;
    }
  }
  .search-input {
    width: 12rem;
    height: 0.91rem;
    margin-top: 1.02rem;
    background: #ffffff;
    border-radius: 0.1rem;
    outline: none;
    text-align: center;
    position: relative;
    z-index: 1;
    &:focus {
      border: 2px solid #ec6941;
    }
  }
}
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
}
#protfolio {
  background: #151f2b;
  overflow: hidden;
  .type-list {
    display: flex;
    justify-content: center;
    margin: 0.8rem auto;
    // $colors: (1 #6c6ce5), (2 #f9d74c), (3 #f97b8b), (4 #80c269);
    $colors: #6c6ce5#f9d74c #f97b8b #80c269;
    .type {
      $height: 0.49rem;
      width: 1.32rem;
      height: $height;
      line-height: $height;
      background: #000;
      margin-right: 0.33rem;
      text-align: center;
      // @each $index, $color in $colors {
      //   &:nth-child(#{$index}) {
      //     background: $color;
      //   }
      // }
      @for $i from 1 through length($colors) {
        &:nth-child(#{$i}) {
          background: nth($list: $colors, $n: $i);
        }
      }
    }
  }
  .waterfall-wrap {
    width: 12rem;
    margin: 0 auto 1.12rem;
    ul {
      width: 3.84rem;
    }
    li {
      margin-bottom: 0.43rem;
      position: relative;
      img {
        width: 3.84rem;
      }
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #00000071;
        text-align: center;
        opacity: 0;
        transition: 0.2s;
        .content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          .btn {
            padding: 0.15rem 0.65rem;
          }
          .link i {
            font-size: 30px;
            display: block;
            margin-top: 0.19rem;
          }
        }
      }
      &:hover .mask {
        opacity: 1;
      }
    }
  }
}
</style>
>
